import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Header } from './components/Layout/Header';
import { Footer } from './components/Layout/Footer';
import { CookieBanner } from './components/CookieBanner';
import { HomePage } from './pages/HomePage';
import { AboutUsPage } from './pages/AboutUsPage';
import { OurTeamPage } from './pages/OurTeamPage';
import { PrivacyPolicyPage } from './pages/PrivacyPolicyPage';
import { AdvertiserDisclosurePage } from './pages/AdvertiserDisclosurePage';
import { ContactUsPage } from './pages/ContactUsPage';
// Import pages
import { PregnancyPage } from './pages/PregnancyPage';
import { NewbornPage } from './pages/NewbornPage';
import { BabyPage } from './pages/BabyPage';
import { ToddlerPage } from './pages/ToddlerPage';
import { CubClubPage } from './pages/CubClubPage';
import { ChecklistsPage } from './pages/ChecklistsPage';
import { ProductDetailPage } from './pages/ProductDetailPage';
import { ChecklistDetailPage } from './pages/ChecklistDetailPage';
import { ArticlesPage } from './pages/ArticlesPage';
import { ArticleDetailPage } from './pages/ArticleDetailPage';
// Layout component that wraps all pages with header and footer
const Layout = ({
  children
}) => {
  return <div className="flex flex-col min-h-screen bg-cream">
      <Header />
      <main className="flex-grow">{children}</main>
      <Footer />
      <CookieBanner />
    </div>;
};
export function AppRouter() {
  return <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout>
              <HomePage />
            </Layout>} />
        {/* Navigation bar pages */}
        <Route path="/pregnancy" element={<Layout>
              <PregnancyPage />
            </Layout>} />
        <Route path="/newborn" element={<Layout>
              <NewbornPage />
            </Layout>} />
        <Route path="/baby" element={<Layout>
              <BabyPage />
            </Layout>} />
        <Route path="/toddler" element={<Layout>
              <ToddlerPage />
            </Layout>} />
        <Route path="/cub-club" element={<Layout>
              <CubClubPage />
            </Layout>} />
        <Route path="/checklists" element={<Layout>
              <ChecklistsPage />
            </Layout>} />
        <Route path="/articles" element={<Layout>
              <ArticlesPage />
            </Layout>} />
        {/* Detail pages */}
        <Route path="/product/:id" element={<Layout>
              <ProductDetailPage />
            </Layout>} />
        <Route path="/checklists/:id" element={<Layout>
              <ChecklistDetailPage />
            </Layout>} />
        <Route path="/articles/:id" element={<Layout>
              <ArticleDetailPage />
            </Layout>} />
        {/* Footer pages */}
        <Route path="/about-us" element={<Layout>
              <AboutUsPage />
            </Layout>} />
        <Route path="/our-team" element={<Layout>
              <OurTeamPage />
            </Layout>} />
        <Route path="/privacy-policy" element={<Layout>
              <PrivacyPolicyPage />
            </Layout>} />
        <Route path="/advertiser-disclosure" element={<Layout>
              <AdvertiserDisclosurePage />
            </Layout>} />
        <Route path="/contact-us" element={<Layout>
              <ContactUsPage />
            </Layout>} />
        {/* Add more routes for other pages as needed */}
      </Routes>
    </BrowserRouter>;
}